<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./index.css"> -->
</head>

<body>

    <div class="box">
        <div class="img_box">
            <ul>
                <li class="img-1"><img src="./img/01.jpeg" /></li>
                <li class="img-2"><img src="./img/02.jpeg" /></li>
                <li class="img-3"><img src="./img/03.jpeg" /></li>
                <li class="img-4"><img src="./img/04.jpeg" /></li>
            </ul>
            <div class="arrow_left">&lt;</div>
            <div class="arrow_right">&gt;</div>
        </div>

        <div class="dot_box">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <script type="module">
        import { Banner, WyBanner } from './index.js'
        let b1 = new WyBanner({
            root: ".box",
            btnClass: [".arrow_left", ".arrow_right"],
            dotClass: '.dot_box > span', listClass: '.img_box > ul >li'
        })
        console.log(b1);

    </script>
</body>

</html>